<template>
	<view style="background-color: #4165f1">
		<Home v-if="activePage==='home'" />
		<AddressList v-if="activePage==='addressList'" />
		<Application v-if="activePage==='application'" />
		<Consult v-if="activePage==='consult'" />
		<Personal v-if="activePage==='personal'" />

	</view>
	<Tabber :activePage="activePage" @change="changePageKey" />
</template>

<script lang="ts" setup>
import Home from './home/home.vue';
import AddressList from './address-list/address-list.vue';
import Application from './application/application.vue';
import Consult from './consult/consult.vue';
import Personal from './personal/personal.vue';
import Tabber from '@/components/tabber/index.vue';
import {
  ref,
} from 'vue';

const activePage = ref('');
const changePageKey = (key: string) => {
  activePage.value = key;
};
</script>

<style lang="less" scoped></style>
